<script setup>
import { ref, onMounted } from 'vue'
import { hotCity, searchTravel, getSearchResult } from '@/apis/apis.js'
import Waterfall from '@/components/common/Waterfall.vue'

const search = ref('')
const searchResult = ref([])
const userTravelsList = ref([])
const historys = ref(JSON.parse(sessionStorage.getItem('historys')) || [])
const hots = ref([])
let timer = null
const historyVisible = ref(true)
const searchResultVisible = ref(false)
const waterfallVisible = ref(false)
const page = ref(1)
const loading = ref(false)
const finished = ref(false)

const onLoad = async () => {
  page.value++
  await getWaterfallData()
  loading.value = false
}

const handleUpdate = (value) => {
  clearTimeout(timer)
  if (value === '') {
    historyVisible.value = true
    searchResultVisible.value = false
    waterfallVisible.value = false
    return
  }
  timer = setTimeout(async () => {
    const findResultIndex = historys.value.findIndex(item => item === value)
    if (findResultIndex >= 0) {
      historys.value.splice(findResultIndex, 1)
    }
    historys.value.unshift(value)
    sessionStorage.setItem('historys', JSON.stringify(historys.value))
    historyVisible.value = false
    waterfallVisible.value = false
    searchResultVisible.value = true
    await getSearchResultData()
  }, 1000)
}

const clearHistory = () => {
  historys.value = []
  sessionStorage.removeItem('historys')
}

const getHotsData = async () => {
  const res = await hotCity()
  hots.value = res.data
}

const getSearchResultData = async () => {
  const res = await searchTravel({ keywords: search.value })
  searchResult.value = res.data
}

const getWaterfallData = async () => {
  const res = await getSearchResult({ page: page.value, keywords: search.value })
  if (res.data.length < 6) {
    finished.value = true
  }
  userTravelsList.value = [...userTravelsList.value, ...res.data]
}

const handleClickTag = (item) => {
  search.value = item
  handleUpdate(item)
}

const handleSearchResult = async (item) => {
  search.value = item
  page.value = 1
  userTravelsList.value = []
  finished.value = false
  historyVisible.value = false
  searchResultVisible.value = false
  waterfallVisible.value = true
  await getWaterfallData()
}

onMounted(async () => {
  await getHotsData()
})
</script>

<template>
  <van-sticky>
    <van-search v-model="search" placeholder="搜索地点/美食等" shape="round" autofocus show-action
      @update:model-value="handleUpdate" />
  </van-sticky>
  <div class="history" v-show="historyVisible">
    <div class="header">
      <span>历史搜索</span>
      <van-icon name="delete-o" size="0.5rem" @click="clearHistory" />
    </div>
    <div class="body">
      <van-tag round color="#eee" text-color="black" size="large" v-for="(item, index) in historys" :key="index"
        @click="handleClickTag(item)">{{ item
        }}</van-tag>
    </div>
  </div>
  <div class="hot" v-show="historyVisible">
    <div class="header">热门旅游城市</div>
    <div class="body">
      <div class="city" v-for="(item, index) in hots" :key="index">
        <div class="left">
          <van-image fit="cover" width="2rem" height="2rem" radius="0.15rem" :src="item.image"
            @click="handleSearchResult(item._id)" />
        </div>
        <div class="right">
          <span>{{ item._id }}</span>
          <span>{{ item.count }}人去过</span>
        </div>
      </div>
    </div>
  </div>
  <div class="result" v-show="searchResultVisible">
    <van-cell :title="item" v-for="(item, index) in searchResult" :key="index" @click="handleSearchResult(item)" />
  </div>
  <van-list :offset="100" v-if="waterfallVisible" :immediate-check="false" v-model:loading="loading"
    :finished="finished" finished-text="没有更多了" @load="onLoad">
    <Waterfall :userTravelsList="userTravelsList" />
  </van-list>
</template>

<style scoped lang="scss">
.van-search {
  --van-search-background: var(--van-gray-1);
  --van-search-content-background: white;
}

.history {
  padding: 0 10px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;

    span {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .body {
    display: flex;
    flex-wrap: wrap;

    .van-tag {
      margin-right: 10px;
      margin-bottom: 10px;
      --van-tag-padding: 5px 10px
    }
  }
}

.hot {
  padding: 0 10px;

  .header {
    margin: 15px 0;
    font-size: 18px;
    font-weight: bold;
  }

  .body {
    .city {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .left {
        display: flex;
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 10px;

        span {
          &:first-child {
            font-size: 18px;
          }

          &:last-child {
            color: #ccc;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
